const { ipcRenderer } = require('electron')
const path = require('path')
let musicFilesPath = []

document.querySelector('#selectMusicButton').addEventListener('click', () => {
    ipcRenderer.send('openMusicFile')
})

document.querySelector('#addMusicButton').addEventListener('click', () => {
    ipcRenderer.send('addTracks',musicFilesPath)
})

const rederListHTML = (pathes) => {
    const musicList = document.querySelector('#musicList')
    const musicItemHTML = pathes.reduce((html, music) => {
            html += `<li class="list-group-item">${path.basename(music)}</li>`
            return html
    },'')
    musicList.innerHTML = `<ul class="list-group">${musicItemHTML}</ul>`
}

ipcRenderer.on('selectedFile',(event, arg) => {
    if(Array.isArray(arg)){
        rederListHTML(arg)
        musicFilesPath = arg
    }
})